import React, { Component } from 'react';
import request from "../../api"
import Twosidebar from './Twosidebar';
import { NavBar, Space, Toast } from 'antd-mobile'

import "./sidebar.css"

interface Props{

}
interface State{
    sidelist:[],
    twosidelist:[]
    count:number,
    fenleion:string
   
}


class SideBarlist extends Component<Props,State> {
    constructor(props:Props){
        super(props);
        this.state={
            sidelist:[], //分类列表
            twosidelist:[], //分类下的品牌列表
            count:0,
            fenleion:""

        }
    }
    componentDidMount(): void {
        
        request.mypro.pro_categorylist().then((ok)=>{
           this.setState({sidelist:ok.data.data,fenleion:ok.data.data[0]},()=>{
            request.mypro.pro_categorybrandlist(ok.data.data[0]).then((oktwo)=>{
                this.setState({twosidelist:oktwo.data.data},()=>{
                    console.log(this.state.twosidelist);
                })
            })
           })
           
        }).catch(()=>{})
    }
    list=(t:any)=>{
        this.setState({twosidelist:[]})
        request.mypro.pro_categorybrandlist(t).then((ok)=>{
            this.setState({twosidelist:ok.data.data},()=>{
                console.log(this.state.twosidelist);
            })
        })
    }
    onchange(item:string,i:any){
        this.setState({count:i,fenleion:item},()=>{
            this.list(this.state.fenleion)
        })
        
    }
    back(){
        
        
    }
    render() {
        return (
            <div className='barlist'>
                <NavBar className='navbar' backArrow={false} onBack={this.back}>分类</NavBar>
                <ul className='barul' draggable="false">
                    {
                        this.state.sidelist.map((item,index)=>{
                            return(
                                <li className={'barli '+(this.state.count===index?"active":"")} onClick={()=>{
                                    this.onchange(item,index)
                                }} key={index}>{item}</li>
                            )
                        })
                    }
                </ul>
                <div className='right'>
                <Twosidebar fenlei={this.state.fenleion} title={this.state.twosidelist}></Twosidebar>
                </div>
            </div>
        );
    }
}

export default SideBarlist;